<template>
  <div class="p-container">
    <div v-if="isShow">
      <Button type="primary" class="back-button" @click="$router.go(-1)" icon="md-arrow-back">返回上一级</Button>
      <div>
        <div class="m-t-md p-detail">赛事信息</div>
        <Card>
          <Row class="m-lg">
            <Col span="8">
              <span class="p-title">竞赛规程名称：</span>
              <span>{{outMatchDetailDto.matchName}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">赛事性质：</span>
              <span>{{outMatchDetailDto.isAttestation === '0'?'主办赛事':'认证赛事'}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">赛事类型：</span>
              <dict-span v-if="outMatchDetailDto.kindCode" code="ZGX_SSDJ" :value="outMatchDetailDto.kindCode"></dict-span>
              <span v-else>-</span>
            </Col>
          </Row>
          <Row class="m-lg">
            <Col span="8">
              <span class="p-title">参赛费用：</span>
              <span>{{outMatchDetailDto.matchMoney/100}}元</span>
            </Col>
            <Col span="8">
              <span class="p-title">参赛名额：</span>
              <span>{{outMatchDetailDto.entryQuota || 0}}人</span>
            </Col>
            <Col span="8">
              <span class="p-title">报名人数：</span>
              <span>{{outMatchDetailDto.countNum || 0}}人</span>
            </Col>
          </Row>
          <Row>
            <Col span="8">
              <span class="p-title">赛事时间：</span>
              <span v-text="$moment(outMatchDetailDto.startTime).format('YYYY-MM-DD')"></span>
              <span>至</span>
              <span v-text="$moment(outMatchDetailDto.endTime).format('YYYY-MM-DD')"></span>
            </Col>
            <Col span="8">
              <span class="p-title">赛事地点：</span>
              <span v-if="outMatchDetailDto.matchProvince">{{outMatchDetailDto.matchProvince}}{{outMatchDetailDto.matchCity}}</span>
              <span v-else>暂无</span>
            </Col>
            <Col span="8">
              <Button type="success" ghost @click="list()">查看竞赛规程</Button>
            </Col>
          </Row>
        </Card>
        <div class="m-t-md p-detail">个人信息</div>
        <Card>
          <Row class="m-lg">
            <Col span="8">
              <span class="p-title">选手姓名：</span>
              <span>{{container.staffName}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">性别：</span>
              <dict-span code="AH" :value='container.sex'></dict-span>
            </Col>
            <Col span="8">
              <span class="p-title">国籍：</span>
              <dict-span code="AG_OUT" :value='container.country'></dict-span>
            </Col>
          </Row>
          <Row class="m-lg">
            <Col span="8">
              <span class="p-title">出生日期：</span>
              <span>{{container.birthday}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">证件类型：</span>
              <dict-span code="ZGX_ZJLX" :value='container.cardType'></dict-span>
            </Col>
            <Col span="8">
              <span class="p-title">证件号码：</span>
              <span>{{container.cardNo}}</span>
            </Col>
          </Row>
          <Row class="m-lg">
            <Col span="8">
              <span class="p-title">电话：</span>
              <span>{{container.phone}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">紧急联系人：</span>
              <span>{{container.emergentName}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">紧急联系人电话：</span>
              <span>{{container.emergentPhone}}</span>
            </Col>
          </Row>
          <Row class="m-lg" v-if="container.cardTypeName">
            <Col span="8" v-if="container.cardTypeName">
              <span class="p-title">会员类型：</span>
              <dict-span code="ZGX_SSDJ" :value="container.cardTypeName"></dict-span>
            </Col>
            <Col span="8" v-if="container.personalId">
              <span class="p-title">会员ID：</span>
              <span>{{container.personalId}}</span>
            </Col>
          </Row>
        </Card>
        <div class="m-t-md p-detail">报名信息</div>
        <Card>
          <Row class="m-lg">
            <Col span="8">
              <span class="p-title">是否缴费：</span>
              <span>{{container.payStatus === '1'?'已缴费':'未缴费'}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">是否退费：</span>
              <span>{{container.retreatStatus === '1'?'已退费':'未退费'}}</span>
            </Col>
            <Col span="8">
              <span class="p-title">报名状态：</span>
              <span>{{container.status === '1'?'待审核':container.status === '3'?'报名成功':container.status === '4'?'审核未通过':'待缴费'}}</span>
            </Col>
          </Row>
        </Card>
      </div>
    </div>
    <Spin v-else fix></Spin>
  </div>
</template>
<script>
  import { getOneById,dict } from '@/api/applets';
  import dictSpan from '_c/dict/dict-span.vue';
  export default {
    components: {
      dictSpan
    },
    data() {
      return {
        container:{},
        outMatchDetailDto:{},
        type:this.$route.params.type,
        result:{},
        isShow:false
      }
    },
    mounted() {
      this.query()
    },
    methods: {
      query() {
        getOneById(this.$route.params.enrollId)
          .then(res => {
            this.container = res;
            let result = res.outMatchDetailDto.entryQuota.split(',');
            let num = 0;
            result.forEach(x => {
              num = num+Number(x)
            });
            res.outMatchDetailDto.entryQuota = num;
            if(res.outMatchDetailDto.matchProvince) {
              let param = {
                dictCode: 'AG_IN',
                parentCode:''
              }
              dict(param)
                .then(data => {
                  res.outMatchDetailDto.matchProvince = data.filter(x =>x.code === res.outMatchDetailDto.matchProvince)[0].name;
                  if(res.outMatchDetailDto.matchCity) {
                    param.parentCode = res.staffProvince;
                    dict(param)
                      .then(result => {
                        res.outMatchDetailDto.matchCity = result.filter(x =>x.code === res.outMatchDetailDto.matchCity)[0].name;
                        this.outMatchDetailDto = res.outMatchDetailDto;
                        this.isShow = true
                      })
                  }else{
                    this.outMatchDetailDto = res.outMatchDetailDto
                    this.isShow = true
                  }
                })
            }

          })
      },
      list() {
        this.$router.push(`/applets-management/competition-regulation/config/${this.type}/` + this.container.matchId)
      }

    }
  };
</script>
<style scoped>
  .p-detail {
    border: 1px solid white;
    background: #2db7f0;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: white;
  }
  .p-title {
    font-weight: bold;
  }
  .p-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>
